<template>
  <a-button type="primary" @click="showModal">
    <plus-outlined/>创建团队
  </a-button>
  <a-modal title="快速创建团队"
           v-model:open="state.open"
           :width="420"
          :footer="false">
    <a-form :model="form" ref="formRef">
      <a-form-item name="name"
                   :rules="{ required: true,message:'请输入团队名称,20字以内'}">
        <a-input v-model:value="form.name"
                 size="large"
                 show-count
                 allow-clear
                 :maxlength="20"
                 placeholder="团队名称，20字以内"/>
      </a-form-item>
      <a-form-item>
        <a-button type="primary"
                  size="large"
                  block
                  @click="onSubmit"
                  :loading="state.loading">完成创建</a-button>
      </a-form-item>
      <a-flex justify="space-between">
        <span class="color-gray">最多允许创建{{store.limit}}个团队</span>
        <div><a-progress :percent="teamLimitInfo.percent" :format="()=>teamLimitInfo.format"
                         class="margin-none" :steps="store.limit" />
        </div>
      </a-flex>
    </a-form>
  </a-modal>
</template>
<script setup lang="ts">
import {PlusOutlined} from "@ant-design/icons-vue";
import {computed, reactive, ref} from "vue";
import {useEnterpriseStore} from "@/store/enterprise";
import {getImage} from "@/config/rangeImage";
import {getUserInfo} from "@/plugin/auth";

const store = useEnterpriseStore()

const state = reactive({
  open:false,
  loading:false
})
const teamLimitInfo = computed(()=>{
  return {
    percent:store.enterpriseList.length / store.limit*100,
    format:store.enterpriseList.length+'/'+store.limit
  }
})
const userinfo = getUserInfo()
const formRef = ref()
const form = reactive({
  user_id:userinfo.id,
  name:'',
  avatar:''
})
const showModal = () => {
  form.avatar = getImage()
  state.open = true
}
const onSubmit = () => {
  formRef.value.validate().then(async () => {
    state.loading = true
    let res = await store.create(form)
    if(res.code === 200){
      formRef.value?.resetFields()
      state.open = false
    }
  }).catch((e)=> {
    console.log(e);
  }).finally(()=>{
    state.loading = false
  })
}
</script>

<style scoped>

</style>